<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <script>
        //1.创建对应省份的市区数组
        var arr0 = new Array("东城区", "西城区", '海淀区', '昌平区');
        var arr1 = new Array("长春市", "四平市", "辽源市", "通化市");
        var arr2 = new Array("济南市", "淄博市", "枣庄市", "日照市");
        var arr3 = new Array("石家庄", "廊坊", "唐山", "承德");
        var arr4 = new Array("南京市", "苏州市", "扬州市", "泰州市");
        //2.将所有的省份的市区数组放置一个大的数组里面 (二维数组)
        var arr = new Array(arr0, arr1, arr2, arr3, arr4);


        //1. 给省份下拉框添加一个onchange事件
        function selectCity(val) {
            var city  = document.getElementById("cityId");
            // 重置市级下拉框中的内容
            city.innerHTML = '<option value="">----请-选-择-市----</option>';

            //2. 将省份的值,作为索引从二维数组获取对应的市(区)的小数组
            var citis = arr[val];
            //3. 遍历数组,将数据插入到市级下拉框中

            for (var i = 0; i < citis.length; i++) {
                // 对象.innerHTML = 值;  替换的原来的值  +=添加
                city.innerHTML += "<option>"+citis[i]+"</option>";
            }
        }


    </script>
</head>
<body>

<!--定义表单 form-->
<form action="#" method="post">
    <table border="0" align="center" width="500">
        <tr>
            <td><label for="username">用户名</label></td>
            <td><input type="text" name="username" id="username"></td>
        </tr>

        <tr>
            <td><label for="password">密码</label></td>
            <td><input type="password" name="password" id="password"></td>
        </tr>

        <tr>
            <td><label for="email">Email</label></td>
            <td><input type="email" name="email" id="email"></td>
        </tr>

        <tr>
            <td><label for="name">姓名</label></td>
            <td><input type="text" name="name" id="name"></td>
        </tr>

        <tr>
            <td><label for="tel">手机号</label></td>
            <td><input type="text" name="tel" id="tel"></td>
        </tr>

        <tr>
            <td><label>性别</label></td>
            <td><input type="radio" name="gender" value="male"> 男
                <input type="radio" name="gender" value="female"> 女
            </td>
        </tr>

        <tr>
            <td align="right">所在地</td>
            <td>
                <!--
                    this: 表示操作的对象
                    this.value: 将当前下拉框封装成this对象,再获取下拉框的value属性值
                -->
                <select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
                    <option value="">----请-选-择-省----</option>
                    <option value="0">北京</option>
                    <option value="1">吉林省</option>
                    <option value="2">山东省</option>
                    <option value="3">河北省</option>
                    <option value="4">江苏省</option>
                </select>
                <select id="cityId" style="width:150px">
                    <option value="">----请-选-择-市----</option>
                </select>

            </td>
        </tr>

        <tr>
            <td><label for="birthday">出生日期</label></td>
            <td><input type="date" name="birthday" id="birthday"></td>
        </tr>

        <tr>
            <td><label for="checkcode">验证码</label></td>
            <td><input type="text" name="checkcode" id="checkcode">
                <img src="img/verify_code.jpg">
            </td>
        </tr>


        <tr>
            <td colspan="2" align="center"><input type="submit" value="注册"></td>
        </tr>
    </table>


</form>

</body>
</html>